<template>
    <div class="app-loading">
        <template v-if="loading">
            <div class="loadings">
                <Skeleton animated title :row="4" />
            </div>
        </template>
        <template v-else-if="total">
            <div class="empty">
                <Result icon="empty" title="暂无数据" />
            </div>
        </template>
        <template v-else>
            <slot />
        </template>
    </div>
</template>
<script setup lang="ts">
import './app.less'
import { LoadingBar } from 'usuuu'

const props = defineProps({
    pending: {
        type: [Boolean, Object],
        default: false
    },
    total: {
        type: Boolean,
        default: false
    },
    error: {
        type: [String, Boolean, Symbol, Object],
        default: false
    }
})
/**
 * loading
 */
const loading = ref(false)
const stop = watchEffect(() => {
    if (props.pending && !loading.value) {
        loading.value = true
        LoadingBar.start()
    } else {
        setTimeout(() => {
            loading.value = false
            LoadingBar.finish()
        }, 300)
    }
})
onBeforeUnmount(() => stop())
</script>